<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-input allowClear v-model="searchForm.username" placeholder="请输入用户昵称" />
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-button type="primary" icon="search" @click="search()">查找</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form layout="inline">
        <a-row>
          <a-col :md="8" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-range-picker v-decorator="['range-picker']" />
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="12" :xs="24" style="padding:0 3px;">
            <a-form-item>
              <a-button type="primary" icon="download" :loading="loading1" @click="loading1=true">导出</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="merchantColumns"
      :dataSource="loadData"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      class="orderlist"
    >
      <span slot="status" slot-scope="text">
        <a-tag color="blue" v-if="text === 1">激活</a-tag>
        <a-tag color="blue" v-if="text === 0">冻结</a-tag>
      </span> 
      <span slot="action" slot-scope="text, record" class="clearfix">
        <a-button
          type="primary"
          @click="edit(record)"
          class="flyray-btn"
        >编辑</a-button>
        <a-button
          type="danger" class="table-danger flyray-btn"
          @click="delvisible=true; delData=record"
        >删除</a-button>
      </span>
    </a-table>
  </a-card>
</template>
<script>
import { getList } from '@/api/mall/merchant'
import { merchantColumns } from '@/const/crud/mall/merchant.config'

export default {
  components: {},
  data() {
    return {
      loadData: null, //列表
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      loading1: false,
      loading: true,
      advanced: false,
      merchantColumns,
      parameter: {
        pageSize: 10,
        orderNo: null,
        page: 1,
        username: ''
      },
      searchForm: {
        orderNo: null,
        username: ''
      },
      pagination: {
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: total => `共有${total}条`
      },
      tableData: [
        {
          spuTitle: '',
          title: '',
          num: null,
          unit: '',
          price: null,
          shipCode: ''
        }
      ]
    }
  },
  filters: {
  },
  methods: {
    search() {
      this.parameter.username = this.searchForm.username
      this.getData()
    },
    handleTableChange(pagination) {
      //分页
      this.parameter.page = pagination.current
      this.parameter.pageSize = pagination.pageSize
      this.getData()
    },
    getData() {
      getList(Object.assign(this.parameter)).then(res => {
        this.loadData = res.data.items
        this.loading = false
        this.pagination.total = res.data.total
      })
    }
  },
  created() {
    this.getData()
  }
}
</script>
<style lang="less" scoped>
.flyray-btn {
  font-size: 12px;
  padding: 0 7px;
  margin: 0 0 0 3px;
  height: 24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}
.ant-modal-confirm {
  top: 35%;
}
.myModel {
  .ant-modal-content {
    margin-top: 15px;
    .ant-modal-header {
      padding: 20px 20px 10px;
      border: none;
      .ant-modal-title {
        line-height: 24px;
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding: 30px 20px;
      color: #606266;
      p {
        margin-bottom: 22px;
        line-height: 36px;
        .subtitle {
          padding: 0 12px 0 0;
          font-weight: 700;
        }
      }
      .ant-table-body {
        thead {
          tr {
            th {
              background-color: #fff;
              div {
                color: #909399;
                font-size: 12px;
                font-weight: 700;
              }
            }
          }
        }
        tr {
          th,
          td {
            div {
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
}
.mybutton {
  padding: 10px 30px 10px;
  text-align: right;
}
.deliveryModel {
  .ant-modal-footer {
    border: none;
  }
  .ant-form-item-label {
    margin-right: 40px;
    label {
      font-weight: 700;
      color: #606366;
      width: 150px;
      &::after {
        content: '';
      }
    }
  }
  .ant-input {
    height: 36px;
  }
  td:last-child {
    padding: 0;
  }
}
</style>
